<template>
  <div style="display: inline-block">
    <svg :width="width" :height="height" :style="{ color: color }">
      <use :xlink:href="prefix + name"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
defineProps({
  prefix: {
    type: String,
    default: '#icon-',
  },
  name: String,
  color: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '16px',
  },
  height: {
    type: String,
    default: '16px',
  },
})
</script>

<style scoped>
/* 如果需要额外的样式覆盖，可以在这里添加 */
svg {
  /* 使用默认值或其他样式 */
}
</style>
